import React, { Component } from 'react';
import { NavLink, Route } from 'react-router-dom';
const Left = props => <div>左侧</div>;
const Right = props => <div>右侧</div>;
export default class Home extends Component {
  render() {
    const { match } = this.props;
    let { path } = match;
    // 如果是 / 说明是第一次进来没有home导航所以要拼接
    path = path === '/' ? '/home' : path;
    return (
      <div>
        <nav>
          <NavLink to={`${path}/left`}>左侧</NavLink>
          <NavLink to={`${path}/right`}>右侧</NavLink>
        </nav>
        <main>
          <Route path={[`${path}/left`, '/']} exact component={Left} />
          <Route path={`${path}/right`} component={Right} />
        </main>
      </div>
    );
  }
}
